import React, {useState} from 'react';
import '@/css/backend_module.css'
import {AppstoreOutlined, MailOutlined, SettingOutlined} from '@ant-design/icons';
import {Layout, Menu} from 'antd';

const {Header, Content, Footer, Sider} = Layout;
const siderStyle = {
    height: '100vh',
    position: 'sticky',
    insetInlineStart: 0,
    top: 0,
    bottom: 0,
    scrollbarWidth: 'thin',
    scrollbarGutter: 'stable',
    overflowY: 'auto',
};
const items = [
    {
        key: '1',
        icon: <MailOutlined/>,
        label: 'Navigation One',
        children: [
            {key: '11', label: 'Option 1'},
            {key: '12', label: 'Option 2'},
            {key: '13', label: 'Option 3'},
            {key: '14', label: 'Option 4'},
        ],
    },
    {
        key: '2',
        icon: <AppstoreOutlined/>,
        label: 'Navigation Two',
        children: [
            {key: '21', label: 'Option 1'},
            {key: '22', label: 'Option 2'},
            {
                key: '23',
                label: 'Submenu',
                children: [
                    {key: '231', label: 'Option 1'},
                    {key: '232', label: 'Option 2'},
                    {key: '233', label: 'Option 3'},
                ],
            },
            {
                key: '24',
                label: 'Submenu 2',
                children: [
                    {key: '241', label: 'Option 1'},
                    {key: '242', label: 'Option 2'},
                    {key: '243', label: 'Option 3'},
                ],
            },
        ],
    },
    {
        key: '3',
        icon: <SettingOutlined/>,
        label: 'Navigation Three',
        children: [
            {key: '31', label: 'Option 1'},
            {key: '32', label: 'Option 2'},
            {key: '33', label: 'Option 3'},
            {key: '34', label: 'Option 4'},
        ],
    },
];
const getLevelKeys = items1 => {
    const key = {};
    const func = (items2, level = 1) => {
        items2.forEach(item => {
            if (item.key) {
                key[item.key] = level;
            }
            if (item.children) {
                func(item.children, level + 1);
            }
        });
    };
    func(items1);
    return key;
};
const levelKeys = getLevelKeys(items);

const backHome = () => {
    const [stateOpenKeys, setStateOpenKeys] = useState(['2', '23']);
    const onOpenChange = openKeys => {
        const currentOpenKey = openKeys.find(key => stateOpenKeys.indexOf(key) === -1);
        // open
        if (currentOpenKey !== undefined) {
            const repeatIndex = openKeys
                .filter(key => key !== currentOpenKey)
                .findIndex(key => levelKeys[key] === levelKeys[currentOpenKey]);
            setStateOpenKeys(
                openKeys
                    // remove repeat key
                    .filter((_, index) => index !== repeatIndex)
                    // remove current level all child
                    .filter(key => levelKeys[key] <= levelKeys[currentOpenKey]),
            );
        } else {
            // close
            setStateOpenKeys(openKeys);
        }
    };
    return (
        <Layout hasSider>
            <Sider style={siderStyle} className='siderLeft'>
                <div className="demo-logo-vertical">111</div>
                <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']} items={items}/>
            </Sider>
            <Layout>
                <Header style={{padding: 0,}}/>
                <Content style={{margin: '24px 16px 0', overflow: 'initial'}}>
                    <div
                        style={{
                            padding: 24,
                            textAlign: 'center',
                        }}
                    >
                        <p>long content</p>
                        {
                            // indicates very long content
                            Array.from({length: 100}, (_, index) => (
                                <React.Fragment key={index}>
                                    {index % 20 === 0 && index ? 'more' : '...'}
                                    <br/>
                                </React.Fragment>
                            ))
                        }
                    </div>
                </Content>
                <Footer style={{textAlign: 'center'}}>
                    Ant Design ©{new Date().getFullYear()} Created by Ant UED
                </Footer>
            </Layout>
        </Layout>
    );
};
export default backHome;